<script setup lang="ts">
import type { VideoItem } from '@/types/video'
import { ref } from 'vue'
// definePageMeta({
//   middleware(to, from) {
//     const token = ref(localStorage.getItem('login'))
//     console.log(token.value)
//     if(!token.value){
//       return navigateTo('/login')
//     }
//   }
// })

//获取频道
const { data: channelList } = await useFetch('/api/channel')

//获取视频列表
const { data: videoList } = await useFetch('/api/video')

//显示的列表
const list = ref<VideoItem[]>([]);
const loading = ref(false);
const finished = ref(false);

//页码
let page = 1
let pageSize = 20
//滚动触底触发
const onLoad = () => {
  loading.value = false
  const data = videoList.value?.slice((page - 1) * pageSize, page * pageSize) as VideoItem[]
  list.value.push(...data)
  page++
  if (videoList.value?.length === list.value.length) {
    finished.value = true
  }
}
//初始化加载-主动请求前20条数据,用于首屏渲染，方便SEO
onLoad()
</script>

<template>
  <!-- 公共头部 -->
  <AppHeader></AppHeader>
  <!-- 频道模块 -->
  <van-tabs>
    <van-tab v-for="item in channelList" :key="item.id" :title="item.name" >
        <template #title ><van-icon :name="item.tag" style="margin-right: 3px;"/>{{ item.name }}</template>  
    </van-tab>
  </van-tabs>

  <!-- 视频列表 -->
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <div class="video-list">
      <AppVideo v-for="item in list" :key="item.bvid" :item="item"></AppVideo>
    </div>
  </van-list>
</template>

<style lang="scss" scoped>
// 视频列表
.video-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 5px;
}

:deep(.van-tab)  {
  color: #191919; 
  background: #f7f7f7;
  border-radius: 10px;
  margin: 0 5px;
  height: 30px;
  font-size: 12px;
}
</style>